<template>
  <div class="left-options">
    <el-autocomplete
      class="search-input"
      v-model="keywords"
      :fetch-suggestions="querySearch"
      placeholder="请输入组件名称"
    />

    <el-collapse
      v-model="activeNames"
    >
      <el-collapse-item
        title="通用节点"
        name="1"
      >
        <div
          ref="generalDndRef"
          class="dnd-box"
        >
          <i
            v-for="generalKeys in generalNodesKeys"
            :key="generalKeys"
            class="generalNode iconfont"
            :class="`icon-${generalKeys}`"
            :data-type="generalKeys"
            @mousedown="startGeneralDrag"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="自定义节点"
        name="2"
      >
        <div
          ref="customDndRef"
          class="dnd-box"
        >
          <i
            v-for="customKey in customNodesKeys"
            :key="customKey"
            class="customNode iconfont"
            :class="`icon-${customKey}`"
            :data-type="customKey"
            @mousedown="startcustomDndDrag"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { throttle } from 'lodash'
import { Dnd } from '@antv/x6-plugin-dnd'
import generalNodes from './generalNodes'
import customNodes from './customNodes.js'
export default {
  data () {
    return {
      keywords: '',
      activeNames: ['1', '2'],
      generalDnd: null,
      customDnd: null
    }
  },
  computed: {
    graph () {
      return this.$store.state.graphStore.graph
    },
    // 通用节点名称集合
    generalNodesKeys () {
      const arr = Object.keys(generalNodes)
      if (this.keywords) {
        return arr.filter(keys => {
          return keys.includes(this.keywords)
        })
      } else {
        return arr
      }
    },
    // 自定义节点名称集合
    customNodesKeys () {
      const arr = Object.keys(customNodes)
      if (this.keywords) {
        return arr.filter(keys => {
          return keys.includes(this.keywords)
        })
      } else {
        return arr
      }
    },
    // 所有组件的名称集合
    compList () {
      return [
        ...this.generalNodesKeys.map(key => ({ value: key })),
        ...this.customNodesKeys.map(key => ({ value: key }))
      ]
    }
  },
  mounted () {
    this.initGeneralDnd()
    this.initCustomDnd()
  },
  methods: {
    // 初始化通用节点
    initGeneralDnd () {
      this.generalDnd = new Dnd({
        target: this.graph,
        scaled: false,
        dndContainer: this.$refs.generalDndRef
      })
    },
    // 初始化自定义节点
    initCustomDnd () {
      this.customDnd = new Dnd({
        target: this.graph,
        scaled: false,
        dndContainer: this.$refs.customDndRef
      })
    },
    // 节点搜索
    querySearch: throttle(function (queryString, cb) {
      var restaurants = this.compList
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    }, 300),
    // 拖拽--通用节点
    startGeneralDrag (e) {
      const target = e.currentTarget
      const type = target.getAttribute('data-type')
      const node = this.graph.createNode(generalNodes[type]())
      this.generalDnd.start(node, e)
    },
    // 拖拽--自定义节点
    startcustomDndDrag (e) {
      const target = e.currentTarget
      const type = target.getAttribute('data-type')
      const node = this.graph.createNode(customNodes[type]())
      this.customDnd.start(node, e)
    }
  }
}
</script>
<style lang="scss" scoped>
.left-options {
  width: 260px;
  order: 1;
  border: 1px solid #d9d9d9;
  margin-top: -1px;
  .search-input{
    width: 100%;
    :deep(.el-input__inner) {
      border-radius: 0px;
    }
  }
  :deep(.el-collapse-item__header){
    background-color: #f4f4f4;
  }
  :deep(.el-collapse-item__content){
    padding-bottom: 0;
  }
  .dnd-box{
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    .generalNode, .customNode{
      font-size: 30px;
      user-select: none;
      cursor: move;
    }
  }
}
</style>
